<template>
  <div>
    <vxe-toolbar>
      <template #buttons>
        <!-- <a-input-search
          placeholder="input search text"
          style="width: 200px"
          @search="onSearch"
        /> -->
        <a-button @click="$refs.OperatePoup.visible = true">新增仓库</a-button>
      </template>
    </vxe-toolbar>

    <vxe-table
      border
      show-header-overflow
      show-overflow
      highlight-hover-row
      :align="allAlign"
      :data="tableData"
    >
      <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
      <vxe-table-column
        field="srName"
        title="仓库名称"
        min-width="150"
      ></vxe-table-column>
      <vxe-table-column
        field="srSite"
        title="仓库所在地址"
        min-width="200"
      ></vxe-table-column>
      <vxe-table-column
        field="srRemainSize"
        title="仓库剩余大小"
        min-width="150"
      ></vxe-table-column>
      <vxe-table-column
        field="srSize"
        title="仓库大小"
        min-width="150"
      ></vxe-table-column>
      <vxe-table-column title="仓库管理员" min-width="150">
        <template #default="{ row }">
          <a-button type="primary" size="small" v-if="row.username != null">
            {{ row.username }}
          </a-button>
          <a-button type="danger" size="small" v-else>
            暂无管理员
          </a-button>
        </template>
      </vxe-table-column>
      <vxe-table-column title="添加时间" min-width="200">
        <template #default="{ row }">
          <a-button type="link">
            {{ tenBitTimestamp(row.updateTime) }}
          </a-button>
        </template>
      </vxe-table-column>
      <vxe-table-column
        field="srStatus.role"
        title="仓库状态"
        min-width="100"
        fixed="right"
      >
        <template #default="{ row }">
          <a-switch
            checked-children="启用"
            :key="row.id"
            :loading="loading"
            un-checked-children="关闭"
            @change="changeStoreStatus(row)"
            :default-checked="row.srStatus.value == '0' ? true : false"
          />
        </template>
      </vxe-table-column>
      <!-- <vxe-table-column
        field="srStatus.role"
        title="更换管理员"
        min-width="100"
        fixed="right"
      >
        <template #default="{ row }">
          <a-button
            type="primary"
            shape="circle"
            ghost
            @click="editor(row)"
            style="margin-right: 10px"
          >
            <i class="iconfont icon-bianji"></i>
          </a-button>
        </template>
      </vxe-table-column> -->
    </vxe-table>
    <a-pagination
      show-quick-jumper
      :default-current="1"
      :total="totalNum"
      @change="onChange"
    />

    <!-- 操作 poup-->
    <operate-poup ref="OperatePoup" />
  </div>
</template>

<script>
import { thirteenBitTimestamp } from '@/utils/index'

import { inputRecord, StoreStatus } from '@/api/storeroom'

import OperatePoup from './components/operate-poup'
export default {
  components: {
    OperatePoup,
  },
  data() {
    return {
      allAlign: 'center',
      tableData: [],
      ApiData: {
        pageNum: 1,
        pageSize: 10,
        site: '',
        srName: '',
        type: 0,
      },
      totalNum: 0,
      // 库房状态改变loading
      loading: false,
    }
  },
  created() {
    this.getStockStoreList()
  },
  methods: {
    onChange(pageNumber) {
      this.ApiData.pageNum = pageNumber
      this.getStockStoreList()
    },
    /**
     * 获取库房数据
     */
    getStockStoreList() {
      inputRecord(this.ApiData).then((res) => {
        this.tableData = res.queryResult.list
        this.totalNum = res.queryResult.total
      })
    },
    /**
     * 时间撮传话
     */
    tenBitTimestamp(time) {
      return thirteenBitTimestamp(time)
    },
    /**
     * 库房状态更新
     */
    changeStoreStatus(info) {
      this.loading = true
      var form = {
        status: '0',
        storeId: info.id,
      }
      if (info.srStatus.value === '0') {
        // 0是启用 直接取反就是
        form.status = '1'
      }
      StoreStatus(form).then((res) => {
        this.loading = false
        this.getStockStoreList()
      })
    },
  },
}
</script>

<style lang="less" scoped>
</style>